<template>
    <div>
        <MyTitle title="意见列表"></MyTitle>

        <SearchTable :changeListData="getAdivseListAsync">
            <template #default="{ sobj }">
                <el-col :span="9" class="ml10">
                    <el-form-item class="" label="意见分类" prop="type">
                        <el-cascader :options="AdviseTypes" style="width:100%;" middle placeholder="请输入意见类型" clearable
                            v-model="sobj.type" />
                    </el-form-item>
                </el-col>
            </template>
        </SearchTable>


        <el-row class="mt10">
            <el-col>
                <div class="adviseitem" v-for="(item, index) in adviseList" :key="index">
                    <el-descriptions :title="item.title" direction="vertical" :column="4" :size="'default'" border
                        class="elitem">
                        <el-descriptions-item label="意见内容" :span="4">
                            <div v-html="item.content">

                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item label="意见人">{{ item.author.username }}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{ item.author.phone }}</el-descriptions-item>
                        <el-descriptions-item label="权限" :span="1">
                            <el-tag style="margin:0 3px;" size="small"
                                :color="roleList.find((v) => v.value == item.author.role).color">
                                {{ roleList.find((v) => v.value == item.author.role).label }}
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="意见类型" :span="1">
                            <el-tag style="margin:0 3px;" size="small" v-for="(l, i) in item.type" :key="i">
                                {{ l }}
                            </el-tag>
                        </el-descriptions-item>

                        <el-descriptions-item label="发表时间" :span="2">
                            <span>{{ $filters.timeFormat(item.time) }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="操作" :span="2">
                            <el-popconfirm title="你确定要删除吗??请三思" @confirm="ToDoDelete(item, index)">
                                <template #reference>
                                    <el-button link type="danger" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button link type="primary" size="small" @click="updateItem(item, index)">修改</el-button>
                            <el-button link type="success" size="small" @click="gotodetail(item, index)">查看</el-button>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from '../../store';
import { computed, onMounted, nextTick } from 'vue'
import { Http } from '../../api/api';
import router from '../../router';
import { AdviseTypes } from '../../utils';

const store = useStore()
const { getAdivseListAsync, getAdviseList, getRoleListAsync } = store;
const adviseList = computed(() => store.adviseList)
const roleList = computed(() => store.roleList)

const ToDoDelete = async (item: any, index: number) => {
    let res = await Http.deleteadvise({ _id: item._id }) as any;
    if (res.code == 200) {
        adviseList.value.splice(index, 1)
        getAdviseList(adviseList.value)
    }
}

const updateItem = (item: any, index: number) => {
    router.push('/advise/update/' + item._id)
}

const gotodetail = (item: any, index: number) => {
    router.push('/advise/detail/' + item._id)
}
onMounted(() => {

    getRoleListAsync()
    nextTick()
    getAdivseListAsync()

})
</script>


<style lang="scss" scoped>
.adviseitem {


    margin: 20px 20px;

    .elitem {
        box-shadow: 0px 0px 2px 2px #ddd;
        border-radius: 10px;
        padding: 20px;
    }
}
</style>
